import { h, render } from "vue";
import Message from './Message.vue'
export type MessageType = 'success' | 'error' | 'default'

// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
const createMessage = (message: string, type: MessageType, timeout?: number) => {
  const messageVnode = h(Message, {
    message, type
  })
  const mountNode = document.createElement('div')
  document.body.appendChild(mountNode)

  render(messageVnode, mountNode)

  const destory = () => {
    render(null, mountNode)
    document.body.removeChild(mountNode)
  }
  if (timeout) {
    setTimeout(() => {
      destory()
    }, timeout)
  }
}

export default createMessage

// import { createApp } from "vue";
// import Message from './Message.vue'
// export type MessageType = 'success' | 'error' | 'default'

// // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
// const createMessage = (message: string, type: MessageType, timeout: number) => {
//   const messageInstance = createApp(Message, {
//     message, type
//   })
//   const mountNode = document.createElement('div')
//   document.body.appendChild(mountNode)
//   messageInstance.mount(mountNode)
//   setTimeout(() => {
//     messageInstance.unmount()
//     document.body.removeChild(mountNode)
//   }, timeout)
// }

// export default createMessage